<template>
  <div>
    <div><h1>天空盒渲染</h1></div>
    <div id="container" style="width:100%,height:100%"></div>
    <div style="height:400px">
      <h3>多人游戏demo</h3>
      <div v-for="item in personals" >
        <p>ID  : {{item.Id}}</p>
        <p>姓名：{{item.Name}}</p>
        <p>类型：{{item.type}}</p>
        <p>位置：[{{item.position.x}},{{item.position.y}},{{item.position.z}}]</p>
      </div>
    </div>
    <p>left</p>
    <img :src=assetsImgs.left style="width:200px;height: 200px;">
    <P>right</P>
    <img :src="assetsImgs.right" style="width:200px;height: 200px;">
    <P>top</P>
    <img :src="assetsImgs.top" style="width:200px;height: 200px;">
    <P>back</P>
    <img :src="assetsImgs.back" style="width:200px;height: 200px;">
    <P>buttom</P>
    <img :src="assetsImgs.buttom" style="width:200px;height: 200px;">
    <P>front</P>
    <img :src="assetsImgs.front" style="width:200px;height: 200px;">
  </div>
</template>

<script>
import * as Three from "three";

export default {
  name: "ThreeTest",
  data() {
    return {
      assetsImgs:{
        left:"src/assets/model_1/left.jpg",
        right:"src/assets/model_1/right.jpg",
        top:"src/assets/model_1/top.jpg",
        back:"src/assets/model_1/back.jpg",
        buttom:"src/assets/model_1/bottom.jpg",
        front:"src/assets/model_1/front.jpg",
      },
      personals: [
        {
          Id: "0001",
          Name: "2260371148",
          type: 0,//0-模型0号，1-模型1号，2-模型2号
          position: {
            x: 0,
            y: 0,
            z: 0
          },
          geometry: null,
          material: null,
          mesh: null
        },
        {
          Id: "0002",
          Name: "201826702111",
          type: 1,
          position: {
            x: 0,
            y: 0,
            z: 0
          },
          geometry: null,
          material: null,
          mesh: null
        }
      ],
      camera: null,
      scene: null,
      renderer: null,
      mesh: null
    };
  },
  methods: {
    init: function() {
      var axisHelper = new Three.AxesHelper(200);
      let container = document.getElementById("container");
      this.camera = new Three.PerspectiveCamera(
        70,
        container.clientWidth / container.clientHeight,
        0.01,
        10
      );
      this.camera.position.z = 10;
      this.scene = new Three.Scene();
      this.scene.add(axisHelper);
      //地面
      var land_geometry = new Three.BoxGeometry(9, 0.1, 9);
      var land_material = new Three.MeshNormalMaterial()
      var land_mesh = new Three.Mesh(land_geometry,land_material)
      land_mesh.position.set(0,0,0);
      this.scene.add(land_mesh);
      //测试对象

      var geometry = new Three.BoxGeometry(2, 2, 2);//
            let material = new Three.MeshNormalMaterial();//
            this.mesh = new Three.Mesh(geometry, material);//
             this.mesh.position.set(0,1.05,0)
             this.scene.add(this.mesh);//
             var i=0
        //for(i=0;i<2;i++){
          // while(i<2){
          //   i++
              this.personals[i].geometry = new Three.BoxGeometry(2, 2, 2);//
              this.personals[i].material = new Three.MeshNormalMaterial();//
              this.personals[i].mesh = new Three.Mesh(this.personals[i].geometry, this.personals[i].material);//
              this.personals[i].mesh.position.set(this.personals[i].position.x+i,this.personals[i].position.y+1.05,this.personals[i].position.z)
                      
        //}
        this.scene.add(this.personals[0].mesh)


      this.renderer = new Three.WebGLRenderer({ antialias: true });
      this.renderer.setClearColor(0xb9d3ff, 1);
      this.renderer.setSize(container.clientWidth, container.clientHeight);
      container.appendChild(this.renderer.domElement);
    },
    animate: function() {
      requestAnimationFrame(this.animate);
      //this.mesh.rotation.x += 0.01;
      this.mesh.rotation.y += 0.02;
      this.renderer.render(this.scene, this.camera);
    }
  },
  mounted() {
    this.init();
    this.animate();
  }
};
</script>
<style scoped>
#container {
  height: 400px;
}
</style>
